<template>

  <div class="trend">
    <ul class="nav">
      <li v-for="(item, index) of tabs" :key="index" :class="{selected:selectedtab==index}" @click="change(index)">{{item.title}}</li>
    </ul>
    <div  class="temporal show">
      <div class="container">
        <div class="header">
          <Row>
            <Col span="6">
              <div class="get-menu">
                <a class="A1" href="#">{{ selectedarea.subtitle }}</a><a class="A2" href="#"></a>
              </div>
            </Col>
            <Col span="10" ><div class="linetitle"></div></Col>
            <Col span="8" align="right">
              <Poptip  content="content" placement="bottom">
                <Button class="choicebase" type="text">{{selectedbase?selectedbase.title: "请选择"+ selectedtype}}<Icon type="md-arrow-dropdown" /></Button>
                <div class="choicelist" slot="content">
                  <Menu accordion >
                    <Submenu v-for="(menu) of selectedarea.menu" :name="menu.title" :key="menu.title" >
                      <template slot="title">
                        {{menu.title}}
                      </template>
                      <MenuItem v-for="(submenu) of menu.submenu"  :name="submenu.title"  :key="submenu.title" @click.native="baseSelected(submenu)">
                      {{submenu.title}}</MenuItem>
                    </Submenu>
                  </Menu>
                </div>
              </Poptip>
            </Col>
          </Row>
        </div>
        <div class="content">
          <Row>
            <Col span="24" align="center">
              <div>
                <chart ref="chart1" class="chart" :options="chartOptions"></chart>
              </div>
            </Col>
          </Row>

        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  data(){
      return {
          cur:0,
          selectedtab: 0, //当前位置，时空趋势图的大tab页签
          types: ["基地","蔬菜"],
          tabs: [
              {
                  title: '基地时空趋势图',
                  subtitle:'全部基地',
                  menu:[
                      {
                          title: '美兰区',
                          submenu:[
                              {
                                  key:'ml-xyxycn',
                                  title: '仙月仙洋常年蔬菜生产基地',
                                  content:'美兰区基地内容1'
                              },
                              {
                                  key:'ml-mhcn',
                                  title: '美焕常年蔬菜生产基地',
                                  content:'美兰区基地内容2'
                              },
                              {
                                  key:'ml-aqycn',
                                  title: '爱群洋常年蔬菜生产基地',
                                  content:'美兰区基地内容3'
                              },
                              {
                                  key:'ml-gtycn',
                                  title: '官厅洋常年蔬菜生产基地',
                                  content:'美兰区基地内容4'
                              },
                              {
                                  key:'ml-dtycn',
                                  title: '大塘洋常年蔬菜生产基地',
                                  content:'美兰区基地内容5'
                              },
                              {
                                  key:'ml-qscn',
                                  title: '群山常年蔬菜生产基地',
                                  content:'美兰区基地内容6'
                              }
                          ]
                      },
                      {
                          title: '琼山区',
                          submenu:[
                              {
                                  key:'qs-lmsc',
                                  title: '龙马蔬菜大棚基地',
                                  content:'琼山区基地内容1'
                              },
                              {
                                  key:'qs-yacn',
                                  title: '友爱常年蔬菜基地',
                                  content:'琼山区基地内容2'
                              },
                              {
                                  key:'qs-tlwsc',
                                  title: '潭龙湾蔬菜大棚基地',
                                  content:'琼山区基地内容3'
                              },
                              {
                                  key:'qs-tlwsc',
                                  title: '期末结转类凭证问题',
                                  content:'琼山区基地内容4'
                              },
                              {
                                  key:'qs-dptxld',
                                  title: '大坡田心露地常年蔬菜基地',
                                  content:'琼山区基地内容5'
                              },
                              {
                                  key:'qs-bspyj',
                                  title: '白石坡有机蔬菜生产基地',
                                  content:'琼山区基地内容6'
                              },
                              {
                                  key:'qs-jzzmrld',
                                  title: '旧州镇美仁露地常年蔬菜基地',
                                  content:'琼山区基地内容7'
                              }
                          ]
                      },
                      {
                          title: '秀英区',
                          submenu:[
                              {
                                  key:'xy-xmjd',
                                  title: '新民菜地',
                                  content:'秀英区基地内容1'
                              },
                              {
                                  key:'xy-ddpd',
                                  title: '大登坡地菜地',
                                  content:'秀英区基地内容2'
                              },
                              {
                                  key:'xy-tscd',
                                  title: '堂善菜地',
                                  content:'秀英区基地内容3'
                              },
                              {
                                  key:'xy-lhcd',
                                  title: '落汗菜地',
                                  content:'秀英区基地内容4'
                              },
                              {
                                  key:'xy-slpcd',
                                  title: '山灵坡菜地',
                                  content:'秀英区基地内容5'
                              },
                              {
                                  key:'xy-xjdcd',
                                  title: '新基地菜地',
                                  content:'秀英区基地内容6'
                              }
                          ]
                      }
                  ]
              },
              {
                  title: '菜品时空趋势图',
                  subtitle:'全部蔬菜',
                  menu:[
                      {
                          title: '美兰区',
                          submenu:[
                              {
                                  title: '仙月仙洋常年蔬菜生产基地',
                                  content:'美兰区菜品1'
                              },
                              {
                                  title: '美焕常年蔬菜生产基地',
                                  content:'美兰区菜品2'
                              },
                              {
                                  title: '爱群洋常年蔬菜生产基地',
                                  content:'美兰区菜品3'
                              },
                              {
                                  title: '官厅洋常年蔬菜生产基地',
                                  content:'美兰区菜品4'
                              },
                              {
                                  title: '大塘洋常年蔬菜生产基地',
                                  content:'美兰区菜品5'
                              },
                              {
                                  title: '群山常年蔬菜生产基地',
                                  content:'美兰区菜品6'
                              }
                          ]
                      },
                      {
                          title: '琼山区',
                          submenu:[
                              {
                                  title: '龙马蔬菜大棚基地',
                                  content:'琼山区菜品1'
                              },
                              {
                                  title: '友爱常年蔬菜基地',
                                  content:'琼山区菜品2'
                              },
                              {
                                  title: '潭龙湾蔬菜大棚基地',
                                  content:'琼山区菜品3'
                              },
                              {
                                  title: '期末结转类凭证问题',
                                  content:'琼山区菜品4'
                              },
                              {
                                  title: '大坡田心露地常年蔬菜基地',
                                  content:'琼山区菜品5'
                              },
                              {
                                  title: '白石坡有机蔬菜生产基地',
                                  content:'琼山区菜品6'
                              },
                              {
                                  title: '旧州镇美仁露地常年蔬菜基地',
                                  content:'琼山区菜品7'
                              }
                          ]
                      },
                      {
                          title: '秀英区',
                          submenu:[
                              {
                                  title: '新民菜地',
                                  content:'秀英区菜品1'
                              },
                              {
                                  title: '大登坡地菜地',
                                  content:'秀英区菜品2'
                              },
                              {
                                  title: '堂善菜地',
                                  content:'秀英区菜品3'
                              },
                              {
                                  title: '落汗菜地',
                                  content:'秀英区菜品4'
                              },
                              {
                                  title: '山灵坡菜地',
                                  content:'秀英区菜品5'
                              },
                              {
                                  title: '新基地菜地',
                                  content:'秀英区菜品6'
                              },
                              {
                                  title: '新基地菜地',
                                  content:'秀英区菜品7'
                              }
                          ]
                      }
                  ]
              }
          ],
          chartOptions: {},
          selectedbase:null, //选中的基地

      }
  },
  computed: {
      // 计算属性的 getter
      selectedarea: function () {//基地或菜品
          // `this` 指向 vm 实例
          return this.tabs[this.selectedtab]
      },
      selectedtype: function () {//基地或菜品
          // `this` 指向 vm 实例
          return this.types[this.selectedtab]
      }
  },
  methods: {
      change(index) {
          this.selectedtab = index;
      },
      generateRandomArr(n, min, max) {
          var arr = [];
          for (var i = 0; i < n; i++) {
              var random = Math.floor(Math.random() * (max - min + 1) + min);
              arr.push(random);
          }
          return arr;
      },
      baseSelected(submenu) {
          this.selectedbase=submenu;
          this.chartOptions = Object.assign({},this.chartOptions,{
              title: {
                  text: submenu.content,
                  left: 'center',

              },
              xAxis: {
                  type: 'category',
                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                  type: 'value'
              },
              series: [{
                  data:this.generateRandomArr(7,100,1000),
                  type: 'line',
                  smooth: true
              }]
          })

      }
  },
  mounted() {

  },
  props: {
    msg: String
  }
}
</script>
<style>
  body{
    margin: 0;
    padding:0;
    height: 100%;
    width: 100%;
  }
  .clear{
    clear: both;
  }
  .linetitle{
    min-height: 1px;
  }
  .container{
    font-family: 微软雅黑;
    font-size: 14px;
  }

  .container .header{
   vertical-align: middle;
    height: 40px;
    line-height: 40px;

  }

  .container .menu h3{
    font-size: 14px;
    cursor: pointer;
    padding-left: 5px;
  }
  .container .menu ul{
    display: none;
  }
  .container .menu ul li{
    height: 28px;
    line-height: 28px;
  }

  .container .menu ul li a:hover{
    background: #9FB6CD;
    border-radius: 14px;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -moz-border-radius:14px;
    color:#fff;

  }

  ul,li{
    list-style: none;
    margin: 0px;
    padding: 0px;
  }

  a{
    text-decoration: none;
    color: #000;
    font-size: 14px;

  }
  .menu a{
    display: block;
    width: 210px;
    height: 26px;
    padding-left: 20px;
    margin-left: 20px;
  }

  .container .menu .selected{
    background: #ccc;
    border-radius: 14px;
  }



  .container .content{
    top: 30px;
    width: 100%;
    height: 380px;
  }

  .container .content .get-menu{
    margin-left: -10px;
  }

  .container .content .get-menu a{
    font-size: 16px;
    height: 40px;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    line-height: 40px;
    cursor: auto;
  }

  .container .content .get-menu a:last-child{
    color: #000;
  }

  .container .content .get-menu span{
    height: 40px;
  }

  .container .content .menu1 .tab {
    display: none;
  }

  .container .content .menu1 .active{
    display: block;
  }

  .container .content .menu1 .tab p{
    font-size: 14px;
    line-height: 20px;
    color: rgba(0,0,0,1);
    word-break:break-all;
  }

  .container .content .menu1 .tab .tt{
    font-size: 14px;
    font-weight: bold;

  }
  /*第二个菜单下的文档内容*/
  .container .content .menu2 .tab {
    display: none;
  }

  .container .content .menu2 .active{
    display: block;
  }

  .container .content .menu2 .tab p{
    font-size: 14px;
    line-height: 20px;
    color: rgba(0,0,0,0.8);
    word-break:break-all;
  }

  .container .content .menu2 .tab .tt{
    font-size: 14px;
    font-weight: bold;

  }
  /*第三个菜单下的文档内容*/
  .container .content .menu3 .tab {
    display: none;
  }

  .container .content .menu3 .active{
    display: block;
  }

  .container .content .menu3 .tab p{
    font-size: 14px;
    line-height: 20px;
    color: rgba(0,0,0,0.8);
    word-break:break-all;
  }

  .container .content .menu3 .tab .tt{
    font-size: 13px;
    font-weight: bold;
  }


  /*滚动条样式*/
  .container .menu::-webkit-scrollbar {
    width: 8px;
  }
  .container .menu::-webkit-scrollbar-track {
    background-color: #fff;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border-radius: 5em;
  }
  .container .menu::-webkit-scrollbar-thumb {
    background-color: #333;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border-radius: 5em;
  }
  .alllist{
    font-size: 14px;
    cursor: pointer;
    padding-left: 5px;
  }




  .trend{
    height: 100%;
    width: 100%;
  }
  .containermain{
    height: 100%;
    width: 100%;
  }
  .timeswitch{
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0;
    margin-left: 10px;
  }
  .timeswitch li{
    float: left;
    margin-right: 15px;
    cursor: pointer;
  }
  .timeswitch .selected{
    color: #0d81e8;
  }
  .timecycle{
    display: none;
    height: 340px;
    width: 700px;
  }
  .content .show{
    display: block;
  }
  .choicebase{
    display: flex;
    align-items: flex-end;

    z-index: 98;
    cursor: pointer;
    border: 0px;
  }
  .choicebase:focus {outline:none;} /*for IE*/
  ::-moz-focus-inner {border-color: transparent;} /*for mozilla*/
  .choicelist{
  text-align: left;
  }
  .container .content .menu0 .tab {
    display: none;
  }

  .container .content .menu0 .active{
    display: block;
  }


  .trend .show{
    display: block;
  }
  .content{
    width: 100%;
    height: 100%;
  }
  .nav{
    width: 360px;
    height: 40px;
    box-shadow: 1px 1px 5px #888888;
    line-height: 40px;
    position: absolute;
    right: 10px;
    top: 10px;
    margin: 0px;
  }
  .nav li{
    width: 49%;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  .nav li:first-child{
    border-right: 1px dashed #a3a3a3;
    width: 50%;
  }
  .nav .selected{
    color: #0b8af3;
  }
  .temporal{
    height: 420px;
    width: 700px;
    display: none;
    position: absolute;
    top:60px;
    right: 10px;
    background: #fff;
    padding: 5px;
    box-shadow: 1px 1px 5px #888888;
  }
  .A1{
    font-weight: bold;
  }

</style>
